<template>
    <button @click="get">123</button>
    <button @click="getwether">获取天气</button>
    <button @click="getwether2">获取</button>
    <div>
        {{ data.list }}
    </div>
    <input type="text" placeholder="请输入经纬度" v-model="inp" @keyup.enter="getwether">
    <div v-for="(item, index) in list1" :key="index">
        预报日期:{{ item.fxDate }}
        相对湿度:{{ item.humidity }}%
        日出时间:{{ item.sunrise }}
        日落时间:{{ item.sunset }}
        当天最高气温:{{ item.tempMax }}℃
        当天最低气温:{{ item.tempMin }}℃
        白天天气状况:{{ item.textDay }}
        夜晚天气状况:{{ item.textNight }}
        白天风向:{{ item.windDirDay }}
        <!-- 白天风力等级:{{ item.windscaleDay }} -->
        夜晚风向:{{ item.windDirNight }}
        <!--夜晚风力等级:{{ item.windscaleNight }} -->
    </div>

    <el-cascader 
        placeholder="请选择地区" 
        size="default" 
        :options="regionData" 
        v-model="selectedOptions"
        @change="handleChange">
    </el-cascader>
    <button @click="click2">获取</button>
    <br>
    <button @click="change('zh-cn')">简体中文</button>
    <button @click="change('en')">English</button>
    <div>{{ t('sitename') }}</div>

</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios';
//引用 element-china-area-data
import { regionData } from 'element-china-area-data'
import { useI18n } from 'vue-i18n';
import { localeContextKey } from 'element-plus';
const { locale,t } = useI18n()
const handleChange = (value) => {
    console.log(value)
}

const data = reactive({
    list: '',
})
const inp = ref(null)
console.log(inp);

const list1 = ref(null)

const get = async () => {
    const response = await axios.get('')

    console.log(response.data.data);
    data.list = response.data.data
}

const city = ref()
const selectedOptions = ref()

const getwether = async (city) => {
    await axios.get('/v7/weather/7d', {
        params: {
            key: 'b514085d8ebf4aa28eddee6641b3998a',
            location: city
        }
    })
        .then(function (res) {
            // 处理成功情况
            console.log(res)
            list1.value = res.data.daily
            console.log(list1)
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error)
        })
        .then(function () {
            // 总是会执行
        })
}

const getwether2 = async () => {
    await axios.get('/v2/city/lookup', {
        params: {
            key: 'b514085d8ebf4aa28eddee6641b3998a',
            location: selectedOptions.value[2]
        }
    })
        .then(function (res) {
            // 处理成功情况
            getwether(res.data.location[0].id)
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error)
        })
        .then(function () {
            // 总是会执行
        })
}

const click2 = () =>{
    console.log(selectedOptions.value[2])
}
// function click2() {
//     console.log(selectedOptions.value[2]);
// }
function change(lang){
    locale.value = lang
}
</script>

<style></style>